<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding: 0%;
            box-sizing: border-box;
        }
        .container {
            text-align: center;
            margin: 30px 0;
        }
        .container h2 {
            text-align: center;
            margin: 30px 0;
            color: rebeccapurple;
        }
        .row {
            height: 43px;
            display: flex;
            justify-content: center;
            margin: 3px;
        }
        .row span {
            height: 50px;
            width: 92px;
            margin: 8px;
            color: rgb(8, 7, 7);
        }
        .row button {
            width: 310px;
            height: 44px;
            border-radius: 10px;
            border: none;
            background-color: orange;
        }
        button:active{
            background-color: olive
        }
        #from {
            font-size:10px;
            border-radius: 7px;
            width: 200px;
        }
        #message {
            font-size:10px;
            border-radius: 7px;
            width: 200px;
        }
        #to {
            font-size:10px;
            border-radius: 7px;
            width: 200px;
        }
    </style>
</head>
<body>
<div class = "container">
    <h2>表白墙</h2>
    <div class = "row">
        <span>谁</span>
        <input type="text" id = "from">
    </div>
    <div class = "row">
        <span>对谁</span>
        <input type="text" id = "to">
    </div>
    <div class = "row">
        <span>说什么</span>
        <input type="text" id = "message">
    </div>
    <div class = "row">
        <button>提交</button>
    </div>
</div>
    <script src = "https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script>
        //选中页面上的元素
        let container = document.querySelector('.container');
        let fromInput = document.querySelector('#from');
        let toInput = document.querySelector('#to');
        let messageInput = document.querySelector('#message');
        let button = document.querySelector('button');
        //点击事件
        button.onclick = function() {
            let from = fromInput.value;
            let to = toInput.value;
            let message = messageInput.value;
            let newdiv = document.createElement('div');
            if(from==''||to==''||message=='' || newdiv==''){
                return;
            }
            newdiv.className = 'row';
            newdiv.innerHTML = from + "对" + to + "说" + message;
            //然后把它插入到div末尾
            container.appendChild(newdiv);
            fromInput.value = '';
            toInput.value = '';
            messageInput.value = '';
            /* 构造JS对象----->也就是JSON对象 */
            let messageJson = {
                from: from,
                to: to,
                message: message
            };
            
            $.ajax({
                type: 'post',
                // 相对路径的写法
                url: 'message',
                contentType: 'application/json;charset=utf8',
                // 绝对路径的写法
                // url: '/MessageWall/message',
                data: JSON.stringify(messageJson),
                success: function(body) {
                    alert("提交成功!");
                },
                error: function() {
                    // 会在服务器返回的状态码不是 2xx 的时候触发这个 error. 
                    alert("提交失败!");
                }
            });
        }
    </script>
</body>
</html>